<!--
 * @Description: 数据字典 - 主页面
 * @Author: DSY
 * @Date: 2022-03-19 22:53:48
 * @LastEditors: DHL
 * @LastEditTime: 2022-10-11 14:08:19
-->
<template>
  <div class="tw-data-dic-wrapper">
    <splitpanes class="default-theme">
      <pane :size="20" class="dic-left">
        <div class="tree-key-word">
          <el-input v-model="treeKeyWord" size="small" clearable placeholder="请输入关键字" />
        </div>
        <div class="toolbar">
          <el-button-group>
            <el-button size="small" @click="hanldeOpenDictTypeForm('add')">新增分类</el-button>
            <el-button size="small" @click="handleExpandTree(true)">展开</el-button>
            <el-button size="small" @click="handleExpandTree(false)">折叠</el-button>
            <el-button size="small" @click="handleSearchDictType">刷新</el-button>
          </el-button-group>
        </div>
        <div class="tree-content">
          <el-scrollbar height="100%">
            <el-tree
              ref="dictTypeRef"
              node-key="id"
              :data="treeData"
              :props="treeProps"
              empty-text="暂无数据"
              draggable
              highlight-current
              default-expand-all
              :expand-on-click-node="false"
              :filter-node-method="handleFilterDictType"
              @node-click="handleNodeClick"
              @node-drop="handleDropDicType"
            >
              <template #default="{ node, data }">
                <span class="custom-tree-node">
                  <template v-if="data.type == '0'">
                    <span>{{ node.label }}</span>
                    <span>
                      <el-button
                        link
                        type="primary"
                        :underline="false"
                        title="新增子级分类"
                        @click.stop="hanldeOpenDictTypeForm('add', data)"
                      >
                        <svg-icon iconClass="plusSquare"></svg-icon>
                      </el-button>

                      <el-button
                        link
                        type="warning"
                        :underline="false"
                        title="编辑分类"
                        @click.stop="hanldeOpenDictTypeForm('edit', data)"
                      >
                        <svg-icon iconClass="editSquare"></svg-icon>
                      </el-button>

                      <el-button
                        link
                        type="danger"
                        :underline="false"
                        title="删除分类"
                        @click.stop="hanldeDelDictType(data)"
                      >
                        <svg-icon iconClass="delete"></svg-icon>
                      </el-button>
                    </span>
                  </template>
                  <template v-else>
                    <span>{{ node.label }}【{{ data.typeCode }}】</span>
                  </template>
                </span>
              </template>
            </el-tree>
          </el-scrollbar>
        </div>
      </pane>
      <pane :size="80">
        <tw-layout @refresh="handleRefresh" @search="handleSearch" @reset="handleReset">
          <!-- 按钮组 -->
          <template #btns>
            <el-button
              class="item"
              type="danger"
              :loading="loadingByDel"
              :disabled="isSelectRows"
              @click="handleDelete()"
            >
              <svg-icon iconClass="delete"></svg-icon>
              批量删除
            </el-button>

            <el-button class="item" type="primary" @click="handleOpenForm('add')">
              <svg-icon iconClass="plus"></svg-icon>
              新增
            </el-button>
          </template>

          <!-- 查询表单 -->
          <template #header>
            <el-form ref="searchFormRef" :model="searchForm" label-width="90px">
              <el-row>
                <el-col :span="6">
                  <el-form-item label="类别编码">
                    <el-input
                      v-model="searchForm.typeCode"
                      clearable
                      placeholder="请输入类别编码"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="类别名称">
                    <el-input
                      v-model="searchForm.typeName"
                      clearable
                      placeholder="请输入类别名称"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="字典值">
                    <el-input
                      v-model="searchForm.dataValue"
                      clearable
                      placeholder="请输入字典值"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="字典值名称">
                    <el-input
                      v-model="searchForm.dataName"
                      clearable
                      placeholder="请输入字典值名称"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="注销标示">
                    <el-select v-model="searchForm.zxbs" clearable placeholder="请选择注销标示">
                      <tw-dic dicKey="ZXBS"></tw-dic>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="字典英文名称">
                    <el-input
                      v-model="searchForm.dataNameEn"
                      clearable
                      placeholder="请输入字典英文名称"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </template>

          <!-- 数据表格 -->
          <tw-table
            ref="tableRef"
            :loading="loading"
            :options="tableOptions"
            :events="tableEvents"
            :data="tableData"
            @search="searchList"
          >
            <!-- 排序号 -->
            <template #dataDicSeq="{ row }">
              <vxe-input
                v-model="row.seqNum"
                type="number"
                @blur="handleUpdateById(row)"
                @prevNumber="handleUpdateById(row)"
                @nextNumber="handleUpdateById(row)"
              ></vxe-input>
            </template>

            <!-- 注销标识 -->
            <template #dataDicZxbs="{ row }">
              <vxe-switch
                v-model="row.zxbs"
                open-label="未注销"
                open-value="0"
                close-label="已注销"
                close-value="1"
                @change="handleUpdateById(row)"
              ></vxe-switch>
            </template>

            <template #action="{ row }">
              <el-button link type="warning" @click="handleOpenForm('edit', row)">编辑</el-button>
              <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
            </template>
          </tw-table>
        </tw-layout>
      </pane>
    </splitpanes>

    <dataDicForm ref="formRef" @refreshTableData="handleRefreshIndex"></dataDicForm>
    <dataDicTypeForm
      ref="dataDicTypeFormRef"
      @refreshTreeData="handleSearchDictType"
    ></dataDicTypeForm>
  </div>
</template>

<script src="./useIndex.ts"></script>

<style scoped lang="scss">
  .tw-data-dic-wrapper {
    height: 100%;
    background-color: #ffffff;

    .splitpanes__pane {
      background-color: #ffffff;
    }

    .dic-left {
      height: calc(100% - 20px);
      padding: 10px;

      .tree-key-word {
        padding: 0px 0px 5px 0px;
      }
      .toolbar {
        padding-right: 0px;
        text-align: right;
      }
      .tree-content {
        margin-top: 5px;
        height: calc(100% - 60px);

        .custom-tree-node {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 12px;
          padding-right: 8px;

          span {
            margin: 0px 5px;

            .is-link {
              padding: 0px 3px;

              .svg-icon {
                width: 1.2em;
                height: 1.2em;
              }
            }
          }
        }
      }
    }
  }
</style>
